<template>
	<view class="cont">
		<view 
			class="item u-p-l-24 u-p-r-24 u-m-t-24"
			v-for="(item, index) in list"
			:key="index">
			<view class="item-box bg-white radius12 u-p-24 u-flex u-col-center">
				<view class="iconImage u-flex u-col-center u-row-center">
					<u-image
						width="60rpx"
						height="60rpx"
						mode="aspectFit"
						:src="`/static/icon_vip_0${item.status == 1 ? 1 : item.status == 2 ? 2 : 3}.png`"></u-image>
				</view>
				<view class="u-flex-1 u-p-l-16">
					<view class="u-font-32">{{item.title}}</view>
					<view class="text-success u-font-26 u-m-t-20">有效期至：2012-12-12</view>
				</view>
				<u-button 
					type="success" 
					size="medium"
					class="u-p-l-40 u-p-r-40">续费</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					title: '金牌会员V1',
					status: 1
				},
				{
					title: '金牌会员V2',
					status: 2
				},
				{
					title: '金牌会员V2',
					status: 2
				},
				{
					title: '金牌会员V1',
					status: 1
				},
				{
					title: '金牌会员V3',
					status: 3
				},
				{
					title: '金牌会员V1',
					status: 1
				},
				{
					title: '金牌会员V3',
					status: 3
				}
			]
		}
	},
	onLoad(options) {
	},
	methods: {
	}
}
</script>

<style lang="scss" scoped>
.cont {
	overflow-x: hidden;
	min-height: 100vh;
	.iconImage {
		width: 120rpx;
		height: 120rpx;
	}
}
</style>
